<!DOCTYPE html>
<html ng-app="testApp">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>增删改查 Argula.js</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="js/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div class="container" ng-controller="parentController" style="padding-top:10px;">
    <!-- list -->
    <div class="panel panel-default" ng-controller="listController" >
        <div class="panel-heading">
            <h3 class="panel-title">用户列表</h3>
        </div>
        <div class="panel-body">
           <form class="form-horizontal" role="form">
              <div class="form-group">
                <label for="name" class="col-sm-1 control-label">姓名</label>
                <div class="col-sm-2">
                  <input type="text" class="form-control" id="name" ng-model="name" placeholder="请输入姓名">
                </div>
                <input type="button" ng-click="getData()" value="查询" class="btn btn-primary">
              </div>
            </form>
            <table class="table">
                <tr>
                    <td>序号</td>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>年龄</td>
                    <td>体重</td>
                    <td>身高</td>
                    <td>爱好</td>
                    <td>操作</td>
                </tr>
                <tr ng-repeat="user in userlist">
                    <td>{{user.id}}</td>
                    <td>{{user.name}}</td>
                    <td>{{user.age}}</td>
                    <td>{{user.gender}}</td>
                    <td>{{user.weight}}</td>
                    <td>{{user.height}}</td>
                    <td>{{user.hobby}}</td>
                    <td>
                        <a href="javascript:void(0);" ng-click="edit(this)">编辑</a>&nbsp;
                         <a href="javascript:void(0);" ng-click="delete(this)">删除</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>
   <!--  add -->
   <div class="panel panel-default" ng-controller="addController">
        <div class="panel-heading">
            <h3 class="panel-title">
                新增用户
            </h3>
        </div>
        <div class="panel-body">
            <form class="form-horizontal form-inline" role="form">
              <div class="form-group">
                    <label for="name" class="col-sm-1 control-label">姓名</label>
                    <div class="col-sm-3">
                      <input type="text" class="form-control" id="name" ng-model="user.name" placeholder="请输入姓名">
                    </div>
                    <label for="gender" class="col-sm-1 control-label">性别</label>
                    <div class="col-sm-3">
                      <input type="text" class="form-control" id="gender" ng-model="user.gender" placeholder="请输入性别">
                    </div>
                    <label for="age" class="col-sm-1 control-label">年龄</label>
                    <div class="col-sm-3">
                      <input type="text" class="form-control" id="age" ng-model="user.age" placeholder="请输入年龄">
                    </div>
              </div>
              <div style="height:10px;"></div>
              <div class="form-group">
                <label for="weight" class="col-sm-1 control-label">体重</label>
                <div class="col-sm-3">
                  <input type="text" class="form-control" id="weight" ng-model="user.weight" placeholder="请输入体重">
                </div>
                <label for="height" class="col-sm-1 control-label">身高</label>
                <div class="col-sm-3">
                  <input type="text" class="form-control" id="height" ng-model="user.height" placeholder="请输入身高">
                </div>
                 <label for="hobby" class="col-sm-1 control-label">爱好</label>
                <div class="col-sm-3">
                  <input type="text" class="form-control" id="hobby" ng-model="user.hobby" placeholder="请输入爱好">
                </div>
              </div>
              <input type="button" ng-click="saveUser()" value="保存" class="btn btn-primary">
            </form>
        </div>
    </div>
   <!--  edit -->
   <div class="panel panel-default" ng-controller="editController">
        <div class="panel-heading">
            <h3 class="panel-title">
                编辑用户
            </h3>
        </div>
        <div class="panel-body">
            <form class="form-horizontal form-inline" role="form">
              <input type="hidden" ng-model="user.id" id="id">
              <div class="form-group">
                    <label for="name" class="col-sm-1 control-label">姓名</label>
                    <div class="col-sm-3">
                      <input type="text" class="form-control" id="name" ng-model="user.name" placeholder="请输入姓名">
                    </div>
                    <label for="gender" class="col-sm-1 control-label">性别</label>
                    <div class="col-sm-3">
                      <input type="text" class="form-control" id="gender" ng-model="user.gender" placeholder="请输入性别">
                    </div>
                    <label for="age" class="col-sm-1 control-label">年龄</label>
                    <div class="col-sm-3">
                      <input type="text" class="form-control" id="age" ng-model="user.age" placeholder="请输入年龄">
                    </div>
              </div>
              <div style="height:10px;"></div>
              <div class="form-group">
                <label for="weight" class="col-sm-1 control-label">体重</label>
                <div class="col-sm-3">
                  <input type="text" class="form-control" id="weight" ng-model="user.weight" placeholder="请输入体重">
                </div>
                <label for="height" class="col-sm-1 control-label">身高</label>
                <div class="col-sm-3">
                  <input type="text" class="form-control" id="height" ng-model="user.height" placeholder="请输入身高">
                </div>
                 <label for="hobby" class="col-sm-1 control-label">爱好</label>
                <div class="col-sm-3">
                  <input type="text" class="form-control" id="hobby" ng-model="user.hobby" placeholder="请输入爱好">
                </div>
              </div>
              <input type="submit" value="保存" class="btn btn-primary">
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
    var app = angular.module('testApp',[]);
     //定义服务，用于不同的控制器之间传输数据(单例模式)
    app.factory('userStorage',function(){
        return null;
    });
    //父控制器
    app.controller('parentController',function($scope,$http){
        
    });
    //列表控制器
    app.controller('listController',function($scope,$http){
      //初始化查询
      $http({
                method:"GET",
                url:"http://localhost:8080/list"
           }).then(function successCallback(response){
                console.log(response.data);
                $scope.userlist = response.data;
           },function errorCallback(response){

           });
       //按条件查询
       $scope.getData = function(){
            var name = $scope.name;
            if(name){
               $http({
                    method:"POST",
                    url:"http://localhost:8080/get?name="+name
               }).then(function successCallback(response){
                    $scope.userlist = response.data;
               },function errorCallback(response){

               });
            }
       };
       //编辑
       $scope.edit = function($scope,userStorage){
            //将当前选中的用户信息赋值给编辑框
            userStorage = $scope.user;    
       };
       //删除
       $scope.delete = function($scope){
           $http({
                method:"get",
                url:"http://localhost:8080/delete?id="+$scope.user.id
            }).success(function(data){
                console.log(data)
            });
       };
    });
    //新增控制器
    app.controller('addController',function($scope,$http){
        $scope.saveUser = function(){
            $http({
                method:"post",
                url:"http://localhost:8080/add",
                headers: {  
                    'Content-Type': 'application/x-www-form-urlencoded'  
                },
                data:$.param($scope.user)
            }).success(function(data){
                console.log(data)
            });
        }
    });
    //编辑控制器
    app.controller('editController',function($scope,$http,userStorage){
        //监听User值的改变
        $scope.user = userStorage;
        $scope.$watch('userStorage',function(){
            console.log("===================");
            console.log(userStorage);
        });
        //保存用户
        $scope.saveUser = function(){
            $http({
                method:"post",
                url:"http://localhost:8080/edit",
                headers: {  
                    'Content-Type': 'application/x-www-form-urlencoded'  
                },
                data:$.param($scope.user)
            }).success(function(data){
                console.log(data)
            });
        }
    });
</script>
</body>
</html>